<template>
    <div class="gradingBoundPage">
        <el-form :inline="true" :model="queryParams" size="small" style="display: flex;justify-content: space-between;">
            <div>
                <el-form-item label="级配类型">
                    <el-select style="width: 120px" v-model="queryParams.matchType" clearable size="mini" placeholder="级配类型">
                        <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="配方名称">
                    <el-select style="width: 120px" v-model="queryParams.matchName" clearable size="mini" placeholder="级配类型">
                        <el-option v-for="item in matchNameList" :key="item.id" :label="item.type" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="handleQuery(true)">查询</el-button>
                    <!-- v-if="$hasPermission('api:asphaltMatchThreshold:list')" -->
                </el-form-item>
            </div>

            <el-form-item>
                <el-button type="success" icon="el-icon-plus" @click="showEdit()">添加</el-button>
                <!-- v-if="$hasPermission('api:asphaltMatchThreshold:save')" -->
            </el-form-item>
        </el-form>

        <div>
            <el-table :data="dataList" :header-cell-style="{ 'text-align': 'center' }" fit border size="mini" highlight-current-row stripe>
                <el-table-column prop="matchType" label="级配类型" align="center"></el-table-column>
                <el-table-column prop="matchName" label="配方名称" align="center"></el-table-column>
                <el-table-column label="级配曲线" align="center">
                    <template slot-scope="scope"><el-link type="primary" @click="showLinechar(scope.row)">级配曲线</el-link></template>
                </el-table-column>
                <template v-for="item of sieveContrl">
                    <el-table-column :prop="item.code" :label="item.size + ''" align="center" :key="item.code"><template slot-scope="scope">{{ scope | showThreshold }}</template></el-table-column>
                </template>
                <el-table-column label="操作" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEdit(scope.row.id)">编辑</el-link> <!-- v-if="$hasPermission('api:asphaltMatchThreshold:edit')" -->
                        <el-divider direction="vertical"></el-divider>
                        <el-link type="primary" @click="onDelete(scope.row.id)">删除</el-link> <!-- v-if="$hasPermission('api:asphaltMatchThreshold:remove')" -->
                    </template>
                </el-table-column>
            </el-table>
            <pagination class="fenye" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

        <el-dialog :title="isAdd ? '添加级配上下限制' : '修改级配上下限制'" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="doClose" width="700px" size="mini">
            <div>
                <el-form ref="editForm" :model="form" :rules="rules" label-width="160px" class="myForm" size="small">
                    <el-form-item label="配方名称" prop="matchName">
                        <!-- <zhjd-match-name v-model="form.matchName" :matchType="form.matchType" @valueChange="matchNameChange" v-if="isAdd" /> -->
                        <el-select style="width: 120px" v-model="form.matchName" v-if="isAdd" clearable size="mini" placeholder="级配类型">
                            <el-option v-for="item in matchNameList" :key="item.id" :label="item.type" :value="item.type"></el-option>
                        </el-select>
                        <span v-else>{{ form.matchName }}</span>
                    </el-form-item>

                    <el-form-item :label="item.size + 'mm筛孔通过率'" class="myItemGroup" required v-for="item of sieveArray" :key="item.code">
                        <el-col :span="11">
                            <el-form-item :prop="'sieve' + item.code + 'min'">
                                <el-input-number placeholder="下限" v-model="form['sieve' + item.code + 'min']" :min="0" :max="100" :precision="2" :controls="false" style="width: 100%"></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">~</el-col>
                        <el-col :span="11">
                            <el-form-item :prop="'sieve' + item.code + 'max'">
                                <el-input-number placeholder="上限" v-model="form['sieve' + item.code + 'max']" :min="0" ::max="100" :precision="2" :controls="false" style="width: 100%"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer">
                <el-button size="mini" @click="doClose">取消</el-button>
                <el-button type="primary" size="mini" @click="doSubmit" :loading="submitLoading">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="forceCurve" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="doClose">
            <div id="lineChar" v-loading="loadingChat"></div>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
    asphaltMatchNameSelect, asphaltMatchThreshold, asphaltMatchThresholdListSelect,
    asphaltMatchThresholdLook, asphaltMatchThresholdAdd, asphaltMatchThresholdEdit,
    asphaltMatchThresholdRemove, asphaltMatchThresholdFind } from "@/api/bitumenMixingStation/gradingSetting/gradingBound";
import constant from "@/api/waterStability/producedData/constant";


export default {
    name: 'gradingBound',
    data() {
        var checkMax = (rule, value, callback) => {
            if (null != value && undefined != value) {
                let fullField = rule.fullField;
                let min = 0;
                let max = 0;
                if ('temperatureMin' == fullField) {
                    min = value;
                    max = this.form.temperatureMax;
                } else if ('temperatureMax' == fullField) {
                    min = this.form.temperatureMin;
                    max = value;
                } else {
                    let field = fullField.substring(0, fullField.length - 3);
                    let type = fullField.substring(fullField.length - 3, fullField.length);
                    if ('min' == type) {
                        min = value;
                        max = this.form[field + 'max'];
                    } else {
                        min = this.form[field + 'min'];
                        max = value;
                    }
                }
                if (min > max) {
                    callback(new Error('下限不可大于上限'));
                }
            }
            callback();
        };
        return {
            sieveSizeDictList: constant.sieveSizeDictList,
            sieveContrl: [],
            sieveArray: [],
            currentType: null,
            currentName: null,
            matchTypeList: [],
            matchNameList: [],
            dataList: [],
            visible: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                matchType: '',
                matchName: '',
            },
            total: 0,
            isAdd: false,
            loading: false,
            submitLoading: false,
            form: {
                type: '',
                name: '',
                info: ''
            },
            rules: {
                matchType: [{ required: true, message: '请选择级配类型', trigger: 'change' }],
                matchName: [{ required: true, message: '请选择配方名称', trigger: 'change' }],
                sieve0d075min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d075max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d15min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d15max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d3min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d3max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d6min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve0d6max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve1d18min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve1d18max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve2d36min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve2d36max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve4d75min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve4d75max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve9d5min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve9d5max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve13d2min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve13d2max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve16min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve16max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve19min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve19max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve26d5min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve26d5max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve31d5min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve31d5max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve37d5min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve37d5max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve52min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve52max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve53min: [
                    { required: true, message: '请填写下限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ],
                sieve53max: [
                    { required: true, message: '请填写上限', trigger: 'blur' },
                    { validator: checkMax, trigger: 'blur' }
                ]
            },
            lineChar: null,
            loadingChat: false,
            forceCurve: false,
            title: ''
        };
    },
    filters: {
        /*** 显示上下限配置 */
        showThreshold(val) {
            let property = val.column.property;
            let data = val.row;
            let min = data['sieve' + property + 'min'];
            let max = data['sieve' + property + 'max'];
            if (null == min || null == max) {
                return '/';
            }
            if (min == max) {
                return min;
            }
            return min + '~' + max;
        }
    },
    mounted() {
        this.handleQuery()
        this.getAsphaltMatchThresholdListSelect()
        this.getAsphaltMatchNameSelect()
    },
    methods: {
        /*** 初始换表单*/
        initForm() {
            this.sieveArray = this.sieveSizeDictList;
            return {};
        },
        /* * 显示级配曲*/
        showLinechar(row) {
            this.forceCurve = true;
            this.loadingChat = true;
            this.title = '施工级配上下限：' + row.matchName;
            asphaltMatchThresholdFind(row.id)
            .then(res => {
                if (!!res) {
                    this.$nextTick(() => {
                        this.createChart(res.data);
                    });
                } else {
                    this.$nextTick(() => {
                        this.createChart({});
                    });
                }
                this.loadingChat = false;
            }).catch(() => {
                this.createChart({});
                this.loadingChat = false;
            });
        },
        /*** 创建图表*/
        createChart(data) {
            if (null == this.lineChar) {
                this.lineChar = echarts.init(document.getElementById("lineChar"));
            } else {
                this.lineChar.clear();
            }
            // 判断需要显示的筛孔数据
            let lData = ['上限', '下限'];
            let xData = [];
            let minData = [];
            let maxData = [];
            let sieveArray = JSON.parse(data.sieveArray || '') || [];
            if (!!sieveArray) {
                let code;
                sieveArray.forEach(item => {
                    xData.push(item);
                    code = item.toString().replace('.', 'd');
                    minData.push(data['sieve' + code + 'min']);
                    maxData.push(data['sieve' + code + 'max']);
                });
            }
            // 添加一条没有的0数据
            xData.unshift(0);
            maxData.unshift(null);
            minData.unshift(null);
            this.lineChar.setOption({
                legend: {
                    data: lData,
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '筛孔尺寸：{b}<br/>{a0}：{c0}<br/>{a1}：{c1}'
                },
                xAxis: {
                    data: xData,
                    boundaryGap: false,
                    name: '筛孔尺寸',
                    nameTextStyle: {
                        padding: [15, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
                    },
                    axisLine: { onZero: true },
                    splitLine: { show: false },
                    splitArea: { show: false }
                },
                yAxis: {
                    name: '通过率(%)'
                },
                series: [
                    {
                        name: '上限',
                        type: 'line',
                        symbol: 'circle',
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted',
                                    color: '#F3637C'
                                }
                            }
                        },
                        data: maxData
                    },
                    {
                        name: '下限',
                        type: 'line',
                        symbol: 'circle',
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted',
                                    color: '#F3637C'
                                }
                            }
                        },
                        data: minData
                    }
                ]
            });
        },
        // 名稱
        getAsphaltMatchNameSelect() {
            asphaltMatchNameSelect().then((res) => {
                this.matchNameList = res.data
            })
        },
        // 類型
        getAsphaltMatchThresholdListSelect() {
            asphaltMatchThresholdListSelect().then((res) => {
                this.matchTypeList = res.data
            })
        },
        getList() {
            this.loading = true;
            asphaltMatchThreshold(this.queryParams).then((res) => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        /*** 提交表单*/
        doSubmit() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.submitLoading = true
                    if (this.isAdd) {
                        // 新增
                        asphaltMatchThresholdAdd(this.form).then((res) => {
                            this.$message.success("新增设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    } else {
                        // 修改
                        asphaltMatchThresholdEdit(this.form).then((res) => {
                            this.$message.success("修改设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    }
                }
            });
        },
        /*** 关闭弹窗*/
        doClose() {
            this.visible = false;
            this.forceCurve = false
        },
        // 删除
        onDelete(id) {
            this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                asphaltMatchThresholdRemove(id).then((res) => {
                    this.getList();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                });
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        getSearchParams() {
            this.getSieveContrl();
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        showEdit(id) {
            this.visible = true;
            this.isAdd = null == id || undefined == id;
            this.loading = false;
            this.submitLoading = false;
            this.$nextTick(() => {
                if (this.isAdd) {
                    this.form = this.initForm();
                    this.$refs['editForm'].resetFields();
                } else {
                    this.infoForm(id);
                }
            });
        },
        infoForm(id) {
            this.loading = true;
            this.$refs['editForm'].clearValidate();
            asphaltMatchThresholdLook(id).then((res) => {
                this.form = res.data;
                this.loading = false;
            }).catch(() => {
                this.form = {}
                this.loading = false;
            });
        },
        /*** 显示所有筛孔数据 */
        getSieveContrl() {
            let sieveArray = !!this.queryParams.matchType ? this.queryParams.matchTypesieveArray : null;
            sieveArray = !!this.queryParams.matchName ? this.queryParams.matchName.sieveArray : sieveArray;
            if (null == sieveArray || undefined == sieveArray || 0 == sieveArray.length) {
                this.sieveContrl = this.sieveSizeDictList;
            } else {
                this.sieveContrl = [];
                sieveArray.forEach((item) => {
                    this.sieveContrl.push({
                        size: item,
                        code: item.toString().replace('.', 'd')
                    });
                });
            }
        }
    }
};
</script>


<style scoped>
.gradingBoundPage {
    padding: 16px;
}
.myItemGroup {
    margin-bottom: 0px;
}
.myItemGroup .line {
    text-align: center;
}
.myForm>>>.el-input-number .el-input__inner {
    text-align: left;
}
#lineChar {
    width: 100%;
    height: 400px;
}
</style>